<template>
	<view class="container">
		<u-popup round="10" @close="closePop" mode="center" :show='true'>
			<u-form ref="form" labelPosition="left" :model="formData" labelWidth="1">
				<view class="modal">
					<view class="modal-header">
						<text class="title">{{ popTitle }}</text>
						<u-icon class="close-icon" name="close" size="20" @click="closePop"></u-icon>
					</view>
					<div class="maskContTitle">
						<div class="maskContTitleImg">
							<image :src="toaskUserInfo.avatar" mode=""></image>
						</div>
						<div class="maskContTitleText ex">
							{{ toaskUserInfo.nickname || '游客' }}
						</div>
					</div>
					<view class="modal-body" @touchmove.stop @touch.stop>
						<view class="select-box" v-for="(item, idx) in selectArr" :key="idx">
							<view :class="['select-item', { 'active': item.status == true }]" @click="handleSelect(idx)"
								:style="{ 'background': item.status == true ? item.tagBg : '' }">
								<span :style="{ 'color': item.status == true ? item.tagTextColor : '' }">{{ item.name
								}}</span>
							</view>
						</view>
					</view>
					<!-- 数量 -->
					<div class="modal-num">
						{{ lableNum }}/{{ newSelectArr.length || 0 }}
					</div>
					<view class="modal-footer">
						<u-button class="cancel-btn" color="#295EFF" :plain="true" type="primary" @click="closePop">取消
						</u-button>
						<u-button class="submit-btn" type="primary" @click="submitTypeAndIndustry">确定</u-button>
					</view>
				</view>
			</u-form>
		</u-popup>
	</view>
</template>

<script>
import {
	industryOptions,
	industryTypeOptions
} from '@/config/industry-config';
export default {
	props: {
		formData: {},
		popTitle: {
			type: String,
			default: ''
		},
		selectArr: {
			type: [String, Array],
			default: []
		},
		toaskUserInfo: [Object, String]
	},
	data() {
		return {
			newSelectArr: [],
			lableNum: 0
		};
	},
	watch: {
		selectArr(newVal, oldVal) {
			this.newSelectArr = newVal
			this.copNum()
		}
	},
	mounted() {
		this.newSelectArr = this.selectArr
		this.copNum()
		console.log('sss', this.newSelectArr)
	},
	methods: {
		handleSelect(index) {
			this.newSelectArr[index].status = !this.newSelectArr[index].status
			this.copNum()
		},
		copNum() {
			var num = 0
			for (var i in this.newSelectArr) {
				if (this.newSelectArr[i].status) {
					num++
				}
			}
			this.lableNum = num
		},
		submitTypeAndIndustry() {
			var arr = []
			for (var i in this.newSelectArr) {
				if (this.newSelectArr[i].status == true) {
					arr.push(this.newSelectArr[i].tagId)
				}
			}
			console.log('this.newSelectArr', arr)
			this.$emit('confirmPop', arr)
		},
		closePop() {
			this.$emit('closePop')
		}
	}
};
</script>

<style scoped lang="scss">
.container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 99;
	width: 100%;
	left: 0;
	top: 0;
	position: fixed;
}

.maskContTitle {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	height: 76rpx;
	padding-left: 12rpx;
	.maskContTitleImg {
		image {
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;
		}
	}

	.maskContTitleText {
		font-size: 28rpx;
		color: #8C8C8C;
		margin-left: 14rpx;
		width: 220rpx;
	}
}

.modal {
	/* width: 80%; */
	width: calc(100vw - 100rpx);
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 10px;
	padding: 32rpx 54rpx;
	// box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	position: relative;
}

.active {
	color: #FFFFFF !important;
	border: none !important;
}

.modal-header {
	display: flex;
	justify-content: center;
	align-items: center;
	// margin-bottom: 20px;
}


.title {
	font-size: 36rpx;
	font-weight: bold;
}

.close-icon {
	position: absolute;
	top: 32rpx;
	right: 32rpx;
}


.modal-body {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	background: #F6F9FF;
	padding: 24rpx 16rpx;
	box-sizing: border-box;
	max-height: 600rpx;
	overflow-y: scroll;
	/* margin-bottom: 32rpx; */
}

.modal-num {
	font-size: 24rpx;
	color: #8F969E;
	text-align: right;
	height: 52rpx;
	line-height: 52rpx;
}

.select-box {
	min-width: 3%;
	margin-right: 30rpx;
}

.select-item {
	min-width: 60rpx;
	height: 46rpx;
	line-height: 46rpx;
	text-align: center;
	border: 2rpx solid #8C8C8C;
	border-radius: 40rpx;
	color: #8C8C8C;
	padding: 0 16rpx;
	font-size: 28rpx;
	margin-bottom: 24rpx;
	box-sizing: border-box;
	/* margin: 0 20rpx; */
}

.modal-footer {
	display: flex;
	justify-content: space-between;
}

.submit-btn {
	/* margin-top: 32rpx; */
	width: 45%;
	height: 76rpx;
	border-radius: 50rpx;
	font-size: 32rpx;
	background-color: #295FFF;
	border: 2rpx solid #295FFF !important;
}

.cancel-btn {
	width: 45%;
	height: 76rpx;
	border-radius: 50rpx;
	border: 2rpx solid #295FFF !important;
	color: #295EFF !important;
}
</style>
